<template>
  <a-card :bordered="false">
    <!-- 查询条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="订单日期">
              <a-range-picker
                :format="dateFormat"
                v-model="createTimeArr"
                @change="onCalendarChange"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="支付通道">
              <a-select v-model="queryParam.chargeType" placeholder="请选择">
                <a-select-option
                  :alue="item.val"
                  v-for="item in payWayList"
                  :key="item.val"
                >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <!-- 更多条件 -->
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item label="订单状态">
                <a-select v-model="queryParam.orderStatus" placeholder="请选择">
                  <a-select-option
                    :value="item.val"
                    v-for="item in payStatusList"
                    :key="item.key"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="回调状态">
                <a-select v-model="queryParam.notifyStatus" placeholder="请选择">
                  <a-select-option
                    :value="item.val"
                    v-for="item in sendStatusList"
                    :key="item.key"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="16" :sm="24">
              <a-form-item label="订单类型">
                <a-input-group compact>
                  <a-select v-model="queryParam.orderType" placeholder="请选择" default-value="1" style="width:40%">
                    <a-select-option :value="item.val" v-for="item in orderTypeList" :key="item.key">{{
                      item.name
                    }}</a-select-option>
                  </a-select>
                  <a-input style="width: 60%" v-model="queryParam.orderNo" />
                </a-input-group>
              </a-form-item>
            </a-col>-->
          </template>

          <!-- 查询按钮 -->
          <a-col :md="(!advanced && 8) || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary" @click="submitQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table ref="table" size="default" :columns="columns" :data="loadData">
      <span slot="chargeType" slot-scope="chargeTypeTxt">{{ chargeTypeTxt | chargeTypeFilter }}</span>
      <span slot="orderStatus" slot-scope="text">{{text | orderStatusFilter}}</span>
      <span slot="notifyStatus" slot-scope="text">{{text | notifyStatusFilter}}</span>
    </s-table>
  </a-card>
</template>

<script>
import STable from '@/components/table/'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import Dict from '@/config/dict.conf'
import { doOrderQuery } from '@/api/api'
import { pageQueryConvert, filterObj } from '@/utils/util'

export default {
  name: 'OrderQuery',
  components: {
    AInput,
    ATextarea,
    STable
  },
  data() {
    return {
      //定义字典
      payWayList: Dict.payWayList,
      payStatusList: Dict.payStatusList,
      sendStatusList: Dict.sendStatusList,
      orderTypeList: Dict.orderTypeList,

      dateFormat: 'YYYY-MM-DD',
      createTimeArr: [],
      form: null,

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},

      //过滤条件
      isorter: {
        column: 'createTime',
        order: 'desc'
      },

      // 表头
      columns: [
        {
          title: '系统订单',
          dataIndex: 'orderCode'
        },
        {
          title: '商户订单',
          dataIndex: 'merchantOrderCode'
        },
        {
          title: '支付方式',
          dataIndex: 'chargeType',
          scopedSlots: { customRender: 'chargeType' }
        },
        {
          title: '提交金额（元）',
          dataIndex: 'payMoney'
          // needTotal: true
        },
        {
          title: '成功金额（元）',
          dataIndex: 'realMoney'
          // sorter: true
        },
        {
          title: '订单状态',
          dataIndex: 'orderStatus',
          scopedSlots: { customRender: 'orderStatus' }
        },
        {
          title: '回调状态',
          dataIndex: 'notifyStatus',
          scopedSlots: { customRender: 'notifyStatus' }
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          // sorter: true,
          order: 'desc'
        },
        {
          title: '详情',
          dataIndex: 'attach'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        let params = Object.assign({}, parameter, this.queryParam, this.isorter)

        for (let p in params) {
          if (params[p] == -1 || params[p] == '-1') params[p] = undefined
        }

        return doOrderQuery(params).then(res => {
          return pageQueryConvert(res)
        })
      }
    }
  },
  filters: {
    /**
     * 支付通道转换过滤
     */
    chargeTypeFilter(chargeType) {
      let chargeTypeList = Dict.payWayList || []
      let txt = ''
      for (let c in chargeTypeList) {
        let ct = chargeTypeList[c]
        if (ct.val == chargeType) {
          txt = ct.name
          break
        }
      }
      return txt
    },

    orderStatusFilter(status) {
      let orderStatusList = Dict.payStatusList || []
      let txt = ''
      for (let o in orderStatusList) {
        let os = orderStatusList[o]
        if (os.val == status) {
          txt = os.name
          break
        }
      }
      return txt
    },

    notifyStatusFilter(status) {
      let sendStatusList = Dict.sendStatusList || []
      let txt = ''
      for (let o in sendStatusList) {
        let os = sendStatusList[o]
        if (os.val == status) {
          txt = os.name
          break
        }
      }
      return txt
    }
  },

  created() {
    console.log('---- oerder query ----')
  },

  methods: {
    moment,

    /**
     * 日期选择
     */
    onCalendarChange(dArr, dsArr) {
      let createTime_begin = dsArr[0]
      let createTime_end = dsArr[1]
      if (createTime_begin) this.queryParam.createTime_begin = createTime_begin
      else delete this.queryParam['createTime_begin']
      if (createTime_end) this.queryParam.createTime_end = createTime_end
      else delete this.queryParam['createTime_end']
    },

    /**
     * 主动查询
     */
    submitQuery(e) {
      let paramsKeyList = Object.keys(this.queryParam)

      if (paramsKeyList.length == 0) {
        this.$message.warning('查询条件不能全为空')
        return
      }

      let params = Object.assign({}, { current: 1, pageSize: 10 }, this.isorter)
      this.$refs.table.loadData(params, {}, null)
    },

    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    resetSearchForm() {
      this.queryParam = {}
      this.createTimeArr = []
    }
  }
}
</script>
<style lang="scss" scoped>
.ant-calendar-picker {
  width: 100%;
}
</style>
